<template>
	<div class="web-main">
		<div class="part1">
			<div class="part1-box">
				<div class="part1-head">校园介绍<i class="el-icon-date"></i>2025年01月20日 星期一</div>
				<div class="part1-body">
					<div class="part1-content">
						<div class="part1-imgs">
							<img :src="item.imageUrl" v-for="(item, index) in partList1" :key="index" alt=""
							 class="part1-img" :class="[activePart1 == index ? 'on' : 'un']">
						</div>
						<div class="part1-list">
							<div class="part1-list-box" v-for="(item, index) in partList1" :key="item.id" @click="handlePart1Click(index,item)">
								<div class="part1-item" :class="[activePart1 == index ? 'part1-on' : 'part1-un']">
									<div class="list-date">
										<div class="up">{{ item.date.slice(8)}}</div>
										<div class="dw">{{ item.date.slice(0,4)}}.{{ item.date.slice(5,7)}}</div>
									</div>
									<div class="list-content">
										<div class="list-title">{{ item.title }}</div>
										<div class="list-desc" v-if="activePart1 == index">{{ item.content }}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="part2">
			<div class="part2-box">
				<div class="part2-head">校园介绍<i class="el-icon-date"></i>2025年01月20日 星期一</div>
				<div class="part2-body">
					<div class="part2-card" v-for="(item, index) in partList2" :key="index">
						<div class="part2-img-wrap">
							<img class="part2-img" :src="item.imageUrl" alt="">
						</div>
						<div class="part2-content">
							<div class="part2-title">{{ item.title }}</div>
							<div class="part2-desc">{{ item.content }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'WebMain',
	data() { 
		return { 
			//基础地址
			baseUrl: process.env.VUE_APP_BASE_API,
			//校园介绍 part1
			partList1: [],
			//选中数据
			activePart1: 0,
			//校园介绍2
			partList2: [],
			timer: null
		}
	},
	mounted() { 
		this.queryData1();
		this.queryData2();
	},
	beforeDestroy() {
		this.clearTimer();
	},
	methods: {
		/**
		 * 查询part1数据
		 */
		queryData1() { 
			let partList = [
				{
					id: 1,
					title: '魏臻教授获评2024年安徽“十大新闻人物”',
					content: '近日，由安徽日报社主办的2024年度安徽“十大新闻人物”评选揭晓。我校教授、博士生导师，合肥工大高科信息科技股份有限公司董事长魏臻荣登榜单。',
					imageUrl: require('@/assets/images/part1/part1-01.jpg'),
					date: '2025-01-17'
				},
				{
					id: 2,
					title: '我校在超复分析研究领域取得新进展”',
					content: '近日，合肥工业大学数学学院徐正华副教授与米兰理工大学Irene Sabadini教授合作的论文“Generalized partial-slice monogenic functions”在《Transactions of the American Mathematical Society》在线发表。这是我校学者首次在这一世界著名刊物上发表研究成果，实现了合肥工业大学在该刊发表论文零的突破。',
					imageUrl: require('@/assets/images/part1/part1-02.png'),
					date: '2025-01-15'
				},
				{
					id: 3,
					title: '学校召开本科教育教学审核评估相关职能部门自评自建工作研讨会',
					content: '为扎实推进学校2025年本科教育教学审核评估工作，1月16日下午，学校召开本科教育教学审核评估相关职能部门自评自建工作布置会。副校长丁立健出席会议，审核评估二级指标牵头单位负责人和主笔人及相关协助单位负责人参加会议。',
					imageUrl: require('@/assets/images/part1/part1-03.png'),
					date: '2025-01-17'
				},
				{
					id: 4,
					title: '学校老年大学举办迎新春汇报演出',
					content: '1月13日下午，学校举办“礼赞新时代 银龄展风采”老年大学迎新春汇报演出。校党委常委、副校长季益洪，校党委常委、宣传部部长陈文恩参加活动。',
					imageUrl: require('@/assets/images/part1/part1-04.png'),
					date: '2025-01-15'
				},
				{
					id: 5,
					title: '学校召开本科教学督导组工作交流会',
					content: '1月16日下午，学校召开本科教学督导组工作交流会，副校长丁立健出席会议，本科教育教学质量专家督导组全体专家及教务处相关人员参加会议。',
					imageUrl: require('@/assets/images/part1/part1-05.jpg'),
					date: '2025-01-19'
				}
			];
			this.partList1 = partList;
			this.activePart1 = 0;
			this.setTimer();
		},
		queryData2() { 
			let partList = [
				{
					id: 1,
					title: '魏臻教授获评2024年安徽“十大新闻人物”',
					content: '近日，由安徽日报社主办的2024年度安徽“十大新闻人物”评选揭晓。我校教授、博士生导师，合肥工大高科信息科技股份有限公司董事长魏臻荣登榜单。',
					imageUrl: require('@/assets/images/part1/part1-01.jpg'),
					date: '2025-01-17'
				},
				{
					id: 2,
					title: '我校在超复分析研究领域取得新进展”',
					content: '近日，合肥工业大学数学学院徐正华副教授与米兰理工大学Irene Sabadini教授合作的论文“Generalized partial-slice monogenic functions”在《Transactions of the American Mathematical Society》在线发表。这是我校学者首次在这一世界著名刊物上发表研究成果，实现了合肥工业大学在该刊发表论文零的突破。',
					imageUrl: require('@/assets/images/part1/part1-02.png'),
					date: '2025-01-15'
				},
				{
					id: 3,
					title: '学校召开本科教育教学审核评估相关职能部门自评自建工作研讨会',
					content: '为扎实推进学校2025年本科教育教学审核评估工作，1月16日下午，学校召开本科教育教学审核评估相关职能部门自评自建工作布置会。副校长丁立健出席会议，审核评估二级指标牵头单位负责人和主笔人及相关协助单位负责人参加会议。',
					imageUrl: require('@/assets/images/part1/part1-03.png'),
					date: '2025-01-17'
				},
				{
					id: 4,
					title: '学校老年大学举办迎新春汇报演出',
					content: '1月13日下午，学校举办“礼赞新时代 银龄展风采”老年大学迎新春汇报演出。校党委常委、副校长季益洪，校党委常委、宣传部部长陈文恩参加活动。',
					imageUrl: require('@/assets/images/part1/part1-04.png'),
					date: '2025-01-15'
				}
			];
			this.partList2 = partList;
		},
		/**
		 * part点击切换
		 * @param item 
		 */
		handlePart1Click(index,item) { 
			this.activePart1 = index;
			this.clearTimer();
			this.setTimer();
		},
		/**
		 * 设置定时器
		 */
		setTimer() { 
			this.timer = setInterval(() => {
				if (this.activePart1 < 4) {
					this.activePart1++;
				} else { 
					this.activePart1 = 0;
				}
			}, 5000)
		},
		/**
		 * 清除定时器
		 */
		clearTimer() { 
			this.timer && clearInterval(this.timer)
		}
	}
}
</script>

<style lang="scss" scoped>
.web-main {
	width: 100%;
	height: auto;
	padding-top: 100px;
	.part1 {
		position: relative;
		width: 1460px;
    	margin: 0 auto;
		margin-bottom: 100px;
		height: 648px;
		padding: 40px 100px;
		background: rgba(255,255,255, .9);
		.part1-box {
			width: 100%;
			height: 100%;
			.part1-head {
				height: 48px;
				line-height: 48px;
				font-size: 15px;
				color: #656565;
				margin-bottom: 20px;
			}
			.el-icon-date {
				margin-left: 15px;
				margin-right: 5px;
			}
			.part1-body {
				width: 100%;
				height: calc(100% - 48px);
			}
			.part1-content {
				display: flex;
				width: 100%;
				height: 100%;
				flex-direction: row;
				.part1-imgs {
					width: 720px;
					height: 440px;
					overflow: hidden;
					.part1-img {
						width: 720px;
						height: 440px;
						&.on {
							display: block;
						}
						&.un {
							display: none;
						}
					}
				}
				.part1-list {
					padding-left: 20px;
				}
			}
			.part1-list-box {
				width: 100%;
				.part1-item {
					display: flex;
					flex-direction: row;
					padding: 11px 0;
					cursor: pointer;
					overflow: hidden;
					transition: all 0.2s ease-in-out;
					.list-date {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
					}
					.list-title {
						margin-bottom: 10px;
					}
				}
				.part1-on {
					height: 136px;
					padding: 30px 30px;
					background: #fff;
					box-shadow: 0 13px 24px 0 rgba(0, 0, 0, 0.3);
					transform: translateY(-10px);
					.list-title {
						color: #a6292f;
					}
					.list-date {
						color: #fff;
						background-color: #a6292f;
					}
				}
				.part1-un {
					border-bottom: 1px dashed #e5c7c4;
					.list-title {
						color: #404040;
					}
					.list-date {
						color: #a6292f;
					}
				}
				.list-date {
					width: 70px;
					text-align: center;
					.up {
						font-size: 30px;
						font-weight: bold;
						padding-bottom: 5px;
					}
					.dw {
						font-size: 12px;
					}
				}
				.list-content {
					width: 400px;
					padding-left: 20px;
					.list-desc {
						display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
						-webkit-line-clamp: 2; /* 行数，值可以改，表示展示X行后多余的缩略展示 */
						-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
						word-break: break-all;
						overflow: hidden;
						font-size: 12px;
						color: #656565;
						line-height: 20px;
					}
				}
			}
		}
	}
	.part2 {
		position: relative;
		width: 1460px;
    	margin: 0 auto;
		margin-bottom: 100px;
		height: 1100px;
		padding: 40px 100px;
		background: rgba(255,255,255, .9);
		.part2-box {
			width: 100%;
			height: 100%;
			.part2-head {
				height: 48px;
				line-height: 48px;
				font-size: 15px;
				color: #656565;
				margin-bottom: 20px;
			}
			.el-icon-date {
				margin-left: 15px;
				margin-right: 5px;
			}
			.part2-body {
				width: 100%;
				height: calc(100% - 48px);
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				.part2-card {
					width: 50%;
					position: relative;
					padding-right: 10px;
					&:nth-child(2n) {
						padding-right: 0;
					}
					&:nth-child(2n-1) {
						.part2-content {
							width: calc(100% - 10px);
						}
					}
					.part2-img-wrap {
						width: 100%;
						height: 420px;
						overflow: hidden;
						&:hover {
							.part2-img {
								transform: scale(1.2);
							}
						}
						.part2-img {
							width: 100%;
							height: 420px;
							transition: all 0.3s;
						}
					}
					.part2-content {
						width: 100%;
						height: 140px;
						position: absolute;
						bottom: 70px;
						left: 0;
						z-index: 99;
						background-color: rgba(0, 0, 0,.6);
						color: #fff;
						padding: 15px;
						.part2-title {
							font-size: 18px;
							padding-bottom: 8px;
						}
						.part2-desc {
							font-size: 14px;
							color: #e0e0e0;
							line-height: 22px;
						}
					}
				}
			}
		}
	}
}
</style>